import { useState } from 'react'
import { connect } from 'react-redux'
import React from 'react'
import 'antd/dist/antd.css'
import '../index.css'
import { Form, Input, Button } from 'antd'

function Employee({ list, dispatch }) {
  const [newUserName, setNewUserName] = useState('')
  const [newAge, setNewAge] = useState('')
  const [newAddress, setNewAddress] = useState('')

  const layout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 10,
    },
  }
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  }

  function createUserHandler() {
    dispatch({
      type: 'create_user',
      payload: {
        user: {
          name: newUserName,
          age: newAge,
          address: newAddress,
        },
      },
    })
  }

  return (
    <Form {...layout} name="basic">
      <Form.Item
        label="姓名："
        value="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input onChange={e => setNewUserName(e.target.value)} />
      </Form.Item>

      <Form.Item
        label="年龄："
        value="age"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input onChange={e => setNewAge(e.target.value)} />
      </Form.Item>

      <Form.Item
        label="地址："
        value="address"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input onChange={e => setNewAddress(e.target.value)} />
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit" onClick={createUserHandler}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  )
}

// export default connect(model => {
//   return {
//     list: model.list,
//   }
// })(List)

export default connect(({ list }) => ({ list }))(Employee)
